<template>
    <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 

  <nav class="nav">
    <router-link to="/home">
      首页
    </router-link>
    <router-link to="/Category">
      分类
    </router-link>
    <router-link to="/shopCart">
      购物车
    </router-link>
    <router-link to="/profile">
      个人中心
    </router-link>
  </nav>
<Loading />
</template>
<script>
import Loading from "components/common/Loading/index.vue"
export default {
 components:{
  Loading
 } 
}
</script>
<style lang="scss">
  .nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    height: 0.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
a{
  font-size: 0.16rem;
  color: #444;
  &.router-link-exact-active{
    color: yellowgreen;
  }
}
</style>
